<template>
  <Card class="left-area">
    <p slot="title" style="position: absolute; margin-top:-10px">流程元素</p>
    <ul>
      <li class="item">
        <div class=" center" ref="start" typeid="start" id="1">
          <Tooltip content="流程开始" placement="right">
            <div class=" ta">
              <Icon type="log-out"></Icon>流程开始
            </div>
          </Tooltip>
        </div>
      </li>
      <li class="item">
        <div class=" center" ref="task" typeid="task" id="2">
          <Tooltip content="人工任务" placement="right">
            <div class=" ta">
             <Icon type="person"></Icon>人工任务
            </div>
          </Tooltip>
        </div>
      </li>
      <!-- <li class="item">
        <div class=" center" ref="decision" typeid="decision" id="3">
          <Tooltip content="决策" placement="right">
            <div class=" ta">
              <Icon type="ios-checkmark-outline"></Icon>决策
            </div>
          </Tooltip>
        </div>
      </li> -->
      <li class="item">
        <div class=" center" ref="end" typeid="end" id="4">
          <Tooltip content="流程结束" placement="right">
            <div class=" ta">
              <Icon type="log-in"></Icon>流程结束
            </div>
          </Tooltip>
        </div>
      </li>
      <li class="item">
        <div class=" center" ref="auto" typeid="auto" id="5">
          <Tooltip content="自动任务" placement="right">
            <div class=" ta">
              <Icon type="android-settings"></Icon>自动任务
            </div>
          </Tooltip>
        </div>
      </li>
      <li class="item">
        <div class=" center" ref="fork" typeid="fork" id="6">
          <Tooltip content="任务分派" placement="right">
            <div class=" ta">
             <Icon type="arrow-expand"></Icon>任务分派
            </div>
          </Tooltip>
        </div>
      </li>
      <li class="item">
        <div class=" center" ref="join" typeid="join" id="7">
          <Tooltip content="任务汇聚" placement="right">
            <div class=" ta">
              <Icon type="arrow-shrink"></Icon>任务汇聚
            </div>
          </Tooltip>
        </div>
      </li>
      <li class="item">
        <div class=" center" ref="subflow" typeid="subflow" id="8">
          <Tooltip content="子流程" placement="right">
            <div class=" ta">
              <Icon type="ios-cloud-upload-outline"></Icon>&nbsp&nbsp子流程
            </div>
          </Tooltip>
        </div>
      </li>
    </ul>
  </Card>
</template>

<script>
export default {
  name: 'LeftArea',
  props: {
    jsp: {
      type: Object
    }
  },
  data() {
    return {
    }
  },
  methods: {
    init() {
      this.jsp.draggable([this.$refs.start, this.$refs.task, this.$refs.end,
       this.$refs.auto, this.$refs.fork, this.$refs.join, this.$refs.subflow], {
        clone: true,
        drag: params => {
          this.$emit('update-pos', params.pos)
        }
      })
    }
  },
  mounted() {
    this.init()
  }
}
</script>

<style lang="css">
.item {
  position: relative;
  width: 100%;
  height: 75px;
  /*border-bottom: 1px solid #333;*/
}

.center {
  position: absolute;
  top: calc(50% - 50px);
  left: calc(50% - 50px);
  position: absolute;
  top: 25px;
  width: 100px;
  height: 50px;
  border: 1px solid #333;
  box-sizing: border-box;
  /* padding: 10%; */
  text-align: center;
   cursor: Move;
}

.ta {
  width: 100px;
  height: 50px;
  padding: 10%;  
  font-size: 1.1em;
}
</style>
